<script setup lang="ts">
import { openAuthFlowPopup } from '~comp-b/auth/openAuthFlowPopup';
import AuthStatus from './AuthStatus.vue';

const userStore = useUserStore();

const statusText = computed(() => {
  if (!userStore.userInfo?.email)
    return $t('wiHpx3LTrpZcNnCgBzo6l');
  return userStore.verified?.email ? $t('cpynOUwHi5LdYcuwQgxn') : $t('dmrsfAx2OeQlQd1A5QKak');
});
</script>

<template>
  <TCard
    class="text-sm" :title="$t('wKwpA6FcRaEuz3UlcWAew')"
    bodyClass="flex flex-col text-sys-text-body gap-2"
  >
    <template #action>
      <AuthStatus :authed="userStore.verified?.email">
        {{ statusText }}
      </AuthStatus>
    </template>

    <div>{{ $t('wmOfsx7YRp7MHp663Si') }}</div>

    <AButton
      v-if="!userStore.verified?.email"
      class="ant-cover__Button-3d-blue mt-auto" block
      type="primary" @click="openAuthFlowPopup('setPassword')"
    >
      {{ $t('t0b3Xgu5GJhdKbkLucITb') }}
    </AButton>
    <div v-else class="mt-auto truncate rounded-2 bg-sys-layer-d p-3 text-sm">
      {{ userStore.userInfo?.email }}
    </div>
  </TCard>
</template>
